import {
  Button,
  Card,
  Form,
  Input,
  message,
} from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva';
import { getPageQuery } from './utils/utils';
import request from '@/utils/request';


const FormItem = Form.Item;
const R = require('ramda');

interface UserInfoProps extends FormComponentProps {
  submitting: boolean;
  dispatch: Dispatch<any>;
}

@connect(({ manageUserInfo }) => ({ manageUserInfo }))
class UserInfo extends Component<UserInfoProps> {
  state: UserInfo|any = {
    url: '',
    amount: 0
  };

  componentDidMount() {
    const { dispatch } = this.props;
    let params = this.props.location.query;

    if (R.isEmpty(params) || R.isNil(params)) {
      message.error('支付参数错误');
      return;
    }
    if (R.isEmpty(params.goodsId) || R.isNil(params.goodsId)) {
      message.error('支付参数错误');
      return;
    }
    if (R.isEmpty(params.bussinesstype) || R.isNil(params.bussinesstype)) {
      message.error('支付参数错误');
      return;
    }
    if (R.isEmpty(params.entityid) || R.isNil(params.entityid)) {
      message.error('支付参数错误');
      return;
    }

    let form = this.props.form;


    this.props.dispatch({
      type: 'payConfirm/wxPay',
      payload: {
        goodsId: params.goodsId,
        body: 'zbt',
        attach: 'zbt',
        bussinesstype: params.bussinesstype,
        entityid: params.entityid,
        extra: params.extra,
        onFail: () => {
          message.error('支付失败，请稍后重试!');
        },
        onSuccess: data => {
          // console.log(data.outTradeNo)
          form.setFieldsValue({ qrcode: data.code });
          const paramList = getPageQuery();
          let { redirect } = paramList as { redirect: string };
          let url = PORTAL_PATH + '/api/file/download?filename=' + data.code;
          this.setState({ url, amount: data.total,outTradeNo:data.outTradeNo });
        },
      },
    });


   let timeer =  setInterval(()=>{
      request(PORTAL_PATH+'/api/payRecode/outTradeNo', { method:'get', params:{outTradeNo:this.state.outTradeNo}, requestType: 'form' }).then((res)=>{
        if(res.status =='4'){
          clearInterval(timeer)
          message.success("支付成功")
        }
      })
    },2000)

  }




  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;

    return (
        <Card bordered={false} style={{maxWidth:800,margin:'0 auto'}} >
          <span> 微信支付</span>
          <Form style={{ marginTop: 8 }}>
            <FormItem label={<span>支付金额</span>}>
              {getFieldDecorator('goodsPrice', {
                rules: [{ required: true, message: '' }],
                initialValue: this.state.amount,
              })(<Input size="large" placeholder="" disabled={true} />)}
            </FormItem>

            <FormItem label={<span>二维码</span>}>
              {getFieldDecorator('qrcode', {
                rules: [{ required: true, message: '' }],
                initialValue: '',
              })(<img id="qrcode" className="logo" src={this.state.url} />)}
            </FormItem>

            <FormItem>
              <Button type="primary" onClick={()=>history.go(-1)}>
                返回
              </Button>
            </FormItem>

          </Form>
        </Card>
    );
  }
}

export default Form.create<UserInfoProps>()(
  connect(({ loading }: { loading: { effects: { [key: string]: boolean } } }) => ({
    submitting: loading.effects['manageUserInfo/submitRegularForm'],
  }))(UserInfo),
);
